續前篇，本篇示例將取得的 json 資料應用在頁面上。

完整栗子 >> Codepen Demo

• 使用的 API 預期資料呈現如下:
  

HTML

<div id="contain"></div>
<h1>台灣獨立書店名冊<span>( 資料來源：政府資料開放平台 )</span></h1>
<div id="contain"></div>

JavaScript

var cros = 'https://cors-anywhere.herokuapp.com/'
var originUrl = "https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M"
var dataUrl = cros + originUrl

var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
    var dataset = JSON.parse(this.responseText)
    print(dataset)
}

function print(dataset){
	dataset.forEach( (data, index) => {
		let newCard = document.createElement("div")
		newCard.className = "infoCard"
		document.querySelector("#contain").appendChild(newCard)
		let newCardInfo = `
			<span class="order">${index + 1}</span>
			<h3 class="name">${data.name}</h3>
			<p class="address">${data.cityName}  ${data.address}</p>
			<p class="openTime">${data.openTime}</p>
		`
		newCard.innerHTML = newCardInfo
    })
}

剖開栗子分析一下:

先將 API URL 存成一個變數 (備註)

var cros = 'https://cors-anywhere.herokuapp.com/'
var originUrl = "https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M"
var dataUrl = cros + originUrl

撈出的資料做型別處理後存成變數 dataset，並將 dataset 傳入指定的 function (成功取得資料後要做的事)

var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
   var dataset = JSON.parse(this.responseText)
    print(dataset)
}

• 可參考前篇Ajax - 以 GET 方法串接 API 資料

透過操作DOM與陣列的方式，將資料置入 HTML DOM 中

function print(dataset){
	dataset.forEach( (data, index) => {
		let newCard = document.createElement("div")
		newCard.className = "infoCard"
		document.querySelector("#contain").appendChild(newCard)
		let newCardInfo = `
			<span class="order">${index + 1}</span>
			<h3 class="name">${data.name}</h3>
			<p class="address">${data.cityName}  ${data.address}</p>
			<p class="openTime">${data.openTime}</p>
		`
		newCard.innerHTML = newCardInfo
	})
}

• 定義這段 function 前，先console.log(dataset) 查看資料結構(key,value)，再取對應的資料欄位於頁面中。
  

• ES6 的字串寫法
  字串內穿插變數更單純、更直覺，只要整個字串前後用 ` 符包起來、變數用 ${ } 包起來，如下：

  let name = "Eudora"
  let age = 18
  let msg = ` Hi! 我是${name}!，今年${age}歲`
  console.log(msg)
  

  "Hi! 我是Eudora!，今年18歲"

  (謎：哦...真的hen好意思ㄟ!?)

• index
  透過陣列操作方法時，也可善用　index　值（陣列中的第幾個）。例如印出該資料為所有資料的第幾筆（但 index 起始值為 0 ，故例子中在印出時刻意 +1）

好啦!以上示例將 JSON 資料帶出，還未接觸過的新手們，也試著做做看囉!

備註：

範例中使用的 API 有 CORS (Cross-Origin Resource Sharing 跨來源資源共用 ) 問題，將 API URL 前面加上 https://cors-anywhere.herokuapp.com/，以暫時避開 CORS　問題以取得資料（詳見：cors-anywhere)

個人 Blog: https://eudora.cc/